{% include 'header.html' %}

<h3>Browse public Log Files</h3>

<p>
    Use <a href="https://github.com/PX4/flight_review/blob/master/app/download_logs.py">
        this script</a> for automated download of public log files.
</p>

<p>

</p>

<table id="logs_table" style="border-collapse: collapse !important"
    class="table table-sm table-striped table-bordered table-condensed">
    <thead>
        <tr>
            <th>#</th>
            <th>Upload Date</th>
            <th>Overview</th>
            <th>Description</th>
            <th>Type</th>
            <th>Airframe</th>
            <th>Hardware</th>
            <th>Software</th>
            <th>Duration</th>
            <th>Start Time</th>
            <th>Rating</th>
            <th>Errors</th>
            <th>Flight Modes</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>


{% include 'footer.html' %}


<!-- include & setup DataTables library (with Bootstrap stylesheets) -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.min.css">

<script type="text/javascript" charset="utf-8" src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

<script type="text/javascript" charset="utf-8"
    src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script>


<script type="text/javascript">

    $(document).ready(function () {
        $('#logs_table').DataTable({
{% if initial_search %}
        "search": {
        "search": {{ initial_search }}
        },
        {% endif %}
        "order": [[1, 'desc']],
        "ordering": true,
        "lengthMenu": [10, 25, 50, 75, 100],

        "columns": [
        { "orderable": false }, /* row number */
        null,
        { "orderable": false }, /* overview */
        { "width": "13%" }, /* description */
        null,
        { "orderable": false },/* airframe - not from DB */
        null,
        null,
        null,
        { "width": "10%" }, /* start time */
        { "orderable": false, "width": "13%" }, /* rating */
        null,
        { "orderable": false, "width": "11%" } /* flight modes */
    ],

        "language": {
        "infoFiltered": "<br>(filtered from _MAX_ total entries)",
    },

        "serverSide": true,
        "ajax": "browse_data_retrieval",
    });
    var table = $('#logs_table').DataTable();
    table.on('xhr', function () {
        try {
            var table = $('#logs_table').DataTable();
            var search_term = table.search();
            var url = new URL(window.location.href);
            if (search_term === '') {
                url.searchParams.delete('search');
            } else {
                url.searchParams.set('search', table.search());
            }
            window.history.replaceState(null, null, url);
        } catch (e) {
        }
    });

} );

</script>

</body>

</html>
